import React from 'react'
import qs from 'qs'
import { useLocation, useParams } from 'react-router-dom'
export default function List() {
   /* 
    useLocation:可以获取当前的路由地址信息
      - path：当前的路由地址
      - search：查询字符串形式的路由传参(query传参)
      - state: 在编程式路由导航的位置传入state参数
      
  
  */
 const location=useLocation();
//  console.log(location,'2');
 const {user}=qs.parse(location.search.split('?')[1])
 const state=location.state 
 
 const {id}=useParams();
//  console.log(musicList,'111');
  return (
    <div>
        <p>用户名是{user} 编号是:{id}</p>
        <ul>
            {
                state.map(item=>{
                    return <li key={item.id}>{item.name}</li>
                })
            }
        </ul>
    </div>
  )
}
